<template>
    <div class="messagelist">
        <div class="content">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div  v-for="item in list" :key="item.index" @click="changeDetail(item)">
                    <div class="list-box">
                        <div class="list-title">{{item.title}}</div>
                        <div class="list-time">{{item.create_time}}</div>
                        <div class="list-info" >
                            <img class="infoImg" v-if="item.viewUser.length > 0" :src="item.viewUser[0].logo" alt="">
                            <img class="infoImg" v-if="item.viewUser.length > 1" :src="item.viewUser[1].logo" alt="">
                            <img class="infoImg" v-if="item.viewUser.length > 2" :src="item.viewUser[2].logo" alt="">
                            <span>{{item.viewNum}}人查看了交流</span>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <!-- 没有更多了 -->
        <div v-if="finished" class="notMore">——&nbsp;没有更多了&nbsp;——</div>
    </div>
</template>

<script>
import { Toast,List,Dialog  } from 'vant';
import {getList} from '@/api/message'
export default {
    name:'messagelist',
    //声明组件
    components:{
        [List.name]:List,
        [Toast.name]:Toast,
        [Dialog.name]:Dialog
    },
    data(){
        return {
            token:'',//token
            loading:false,//列表加载中
            finished:false,//列表是否加载完成
            userId:0,//用户id
            list:[],//留言列表
            pageIndex:1,
            pageSize:10,
            total:0,//总条数
        }
    },
    created(){
        //获得参数token
        if(this.$route.query.token){
            this.token = this.$route.query.token;
        }   
        this.getList();//获取留言列表
    },
    methods:{
        //获取列表
        getList(){
            //加载状态
            this.loading = true;
            getList(this.pageIndex,this.pageSize).then(res => {
                if(res.code == 200){
                    if(this.pageIndex == 1){
                        this.list = res.data.list;
                    }else {
                        let lists = this.list;
                        this.list = lists.concat(res.data.list);
                    }
                    this.total = res.data.total;
                    //加载状态
                    this.finished = false;
                    this.loading = false;
                }else if(res.code == 403){
                    Dialog.alert({
                        title: '提示',
                        message: '您的账号被挤下线，请重新登录',
                        confirmButtonText:'去登陆'
                    }).then(() => {
                        //跳转原生登录
                        let para = {};
                        para.linkType = "login";
                        this.interaction.hLinkToApp(para);
                    });
                    this.loading = false;
                }
            })
        },
        // 上滑懒加载
        onLoad(){
            setTimeout(()=>{
                this.pageIndex++;
                if(this.list.length != this.total){
                    this.getList();//加载更多
                }else {
                    //加载状态
                    this.finished = true;
                    this.loading = false;
                }
            },500);
        },
        //跳转留言详情
        changeDetail(item){
            let id = item.id;//当前问题id
            let para = {};
            para.title = '问题详情',
            para.url = '/messageDetail?token='+this.token+"&id="+id,
            this.interaction.hLink(para);
        },
    }
    
}

</script>

<style lang="stylus" scoped>
 .messagelist{
    width :100%;
    height :100%;
    .content{
        padding:.266667rem;
        .list-box {
            padding-bottom :.266667rem;
            margin-bottom :.266667rem;
            border-bottom:.026667rem solid #f1f1f1;
            .list-title {
                line-height :.533333rem;
                font-size:.4rem;
                color:#494949;
                margin-bottom :.133333rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; 
            }
            .list-time {
                font-size:.266667rem;
                color:#a2a2a2;
                margin-bottom :.266667rem;
            }
            .list-info {
                font-size:.266667rem;
                color:#a2a2a2;
                .infoImg{
                    width:.426667rem;
                    height:.426667rem;
                    border-radius :2.666667rem;
                    margin-right :-0.12rem;
                }
                span {
                    margin-left :.16rem;
                }
            }

        }
    }
    .notMore {
        width: 10rem;
        height: 1.066667rem;
        line-height: 1.066667rem;
        font-size: .373333rem;
        color: #A2A2A2;
        text-align: center;  
    }
}    
</style>